window.addEventListener("load", () => {
    console.log(123);
    // 1. 显示与隐藏
    var mask = document.querySelector(".mask");
    var big = document.querySelector(".big");
    var preview_img = document.querySelector(".preview_img");
    var bigImg = document.querySelector(".bigImg");
  
    preview_img.addEventListener("mouseover", () => {
      mask.style.display = "block";
      big.style.display = "block";
    });
    preview_img.addEventListener("mouseout", () => {
      mask.style.display = "none";
      big.style.display = "none";
    });
  
    // 2. 鼠标放入小图，遮挡层跟随鼠标移动,鼠标在盒子内坐标
    preview_img.addEventListener("mousemove", (e) => {
      // 鼠标在盒子内的坐标
      var x = e.pageX - preview_img.offsetLeft;
      var y = e.pageY - preview_img.offsetTop;
      // 偏移 遮挡层的一半宽度
      x = x - mask.offsetWidth / 2;
      y = y - mask.offsetHeight / 2;
      // 小图的最大移动距离
      moveMaxX = preview_img.offsetWidth - mask.offsetWidth;
      moveMaxY = preview_img.offsetHeight - mask.offsetHeight;
      if (x < 0) {
        x = 0;
      } else if (x > moveMaxX) {
        x = moveMaxX;
      }
      if (y < 0) {
        y = 0;
      } else if (y > moveMaxY) {
        y = moveMaxY;
      }
      mask.style.left = x + "px";
      mask.style.top = y + "px";
      /* 
          小图的移动距离       大图移动距离
          小图最大移动距离     大图最大移动距离
          大图移动距离 = 小图的移动距离 * 大图最大移动距离 / 小图最大移动距离
      */
      // 大图最大移动距离
      var bigMoveMaxX = bigImg.offsetWidth - big.offsetWidth;
      var bigMoveMaxY = bigImg.offsetHeight - big.offsetHeight;
      var bigMoveX = (x * bigMoveMaxX) / moveMaxX;
      var bigMoveY = (y * bigMoveMaxY) / moveMaxY;
  
      console.log(bigMoveX, bigMoveY);
      console.log(bigImg);
      bigImg.style.left = -bigMoveX + "px";
      bigImg.style.top = -bigMoveY + "px";
    });
  });